<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">

    <title>生活目标</title>
    <link rel="stylesheet" href="lib/bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <style>
        .logo {
            width: 60%;
            /*height: 500px;*/
            margin: auto;
            padding-top:50px;
        }

        .name {
            text-align: center;
            font-size: 66px;
            text-shadow: 3px 5px grey, 1px 1px #333;
        }

        .img {
            width: 48%;
            height: 53%;
            margin: auto;
            margin-top: 38px;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .search {
            width: 80%;
            height: 100px;
            margin: auto;
        }

        .noExtension {
            width: 60%;
            height: 100px;
            margin: auto;
            font-size: 23px;
        }

        #search_value {
            width: 80%;
            height: 50px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        .search button {
            width: 18%;
            height: 50px;
            margin-left: 6px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        @keyframes rotate {
            0% { transform:rotateY(0deg);}
            25% { transform:rotateY(180deg);}
            50% { transform:rotateY(0deg);}
            75% { transform:rotateY(180deg);}
            100% { transform:rotateY(0deg);}
        }

        .logo_rotate {
            /*
            animation: rotate 10s infinite;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
                */
            /*  当动画结束时，让<div>元素保留上一个关键帧的样式值 */
        }

        .result_success {
            width: 60%;
            margin: auto;
            font-size: 22px
        }

        .result_faile{
            width: 60%;
            margin: auto;
            font-size: 22px
        }

        .add_banner{
            width: 80%;
            margin: auto;
        }

        .add_banner input{
            width: 80%;
            height: 50px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        .add_banner button{
            width: 18%;
            height: 50px;
            margin-left: 6px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        #search_banner{
            font-size: 50px;
            border-bottom: 1px solid black;
        }

        p{
            text-indent:2em;
            font-size: 30px;
        }

        .hide{
            display: none;
        }

        .contenner{
            background: url("img/bg.jpg");
          	height: 900px;
          	
        }

        .author{
            text-align: right;
        }
        .author p{
            display: inline-block;
            font-size: 18px;
        }
        .footer{
            position: fixed;
            bottom: 0;
            text-align: center;
            width:100%;
        }
    </style>
</head>

<body>
<div class="contenner">
    <div class="logo">
        <div class="name">生活目标</div>
    </div>
     <div class="noExtension hide" id="noExtension">
            注意: 请安装 <a target="_blank" href="https://github.com/ChengOrangeJu/WebExtensionWallet" style="color: red;">星云钱包拓展</a>
        </div>
    <div class="noExtension hide" id="noExtension">
        NOTE: Please install <a target="_blank" href="https://github.com/ChengOrangeJu/WebExtensionWallet">WebExtensionWallet</a>  to use SUPER DICTIONARY
    </div>
    <div class="search">
        <input id="search_value" type="text" placeholder="请输入姓名">
        <button id=search>查询</button>
    </div>

    <div class="result_success hide">
        <div id=search_banner></div>
        <p id=search_result> wait for content </p>
        <div class="author">
            <i><p> 作者:</p> <p id=search_result_author> dasdajkajksdhjasdkjahdkjad</p></i>
        </div>
    </div>

    <div class="result_faile hide">
        没有找到 &nbsp;&nbsp;<i id="result_faile_add" style="color:red">asd</i>&nbsp;&nbsp; 生活目标. <button class="button button-pill button-primary" id="add">添加</button>
    </div>

    <div class="add_banner hide">
        <input type="text" id="add_value" placeholder="请输入生活目标">
        <button id="push">提交</button>
    </div>
 
</div>

<script src=lib/jquery-3.3.1.min.js></script>
<script src=lib/nebPay.js></script>
<script src=lib/bootstrap-4.0.0-dist/js/bootstrap.min.js></script>
<script src=lib/nebulas.js></script>
<script>


    "use strict";


    // $("#search_value").attr("disabled",true)
    // $("#search").attr("disabled",true)
    // //to check if the extension is installed
    // //if the extension is installed, var "webExtensionWallet" will be injected in to web page
    // if(typeof(webExtensionWallet) === "undefined"){
    //     //alert ("Extension wallet is not installed, please install it first.")
    //     $("#noExtension").removeClass("hide")
    // }else{
    //     $("#search_value").attr("disabled",false)
    //     $("#search").attr("disabled",false)
    // }


    var NebPay = require("nebpay");     //https://github.com/nebulasio/nebPay
      var nebPay = new NebPay();

      //  $("#search_value").attr("disabled",true)
       // $("#search").attr("disabled",true)


      //to check if the extension is installed
      //if the extension is installed, var "webExtensionWallet" will be injected in to web page
      if(typeof(webExtensionWallet) === "undefined"){
          //alert ("Extension wallet is not installed, please install it first.")
          $("#noExtension").removeClass("hide")
      }else{
          $("#search_value").attr("disabled",true)
          $("#search").attr("disabled",true)
      }
        
    var dappAddress = "n1qtNQkL1Z5ggxuMQe2zJNVw5z9YzuUN4dS";

    var nebulas = require("nebulas"),
        Account = nebulas.Account,
        neb = new nebulas.Neb();
    neb.setRequest(new nebulas.HttpRequest("https://testnet.nebulas.io"));

    // 搜索功能: 查找Super-Dictionary 中有没有该词条
    $("#search").click(function(){
        // $("#search_value").val() 搜索框内的值

        var from = Account.NewAccount().getAddressString();

        var value = "0";
        var nonce = "0"
        var gas_price = "1000000"
        var gas_limit = "2000000"
        var callFunction = "get";
        var callArgs = "[\"" + $("#search_value").val() + "\"]"; //in the form of ["args"]
        var contract = {
            "function": callFunction,
            "args": callArgs
        }

        neb.api.call(from,dappAddress,value,nonce,gas_price,gas_limit,contract).then(function (resp) {
            cbSearch(resp)
        }).catch(function (err) {
            //cbSearch(err)
            console.log("error:" + err.message)
        })

    })

    //return of search,
    function cbSearch(resp) {
        var result = resp.result    ////resp is an object, resp.result is a JSON string
        console.log("return of rpc call: " + JSON.stringify(result))

        if (result === 'null'){
            $(".add_banner").addClass("hide");
            $(".result_success").addClass("hide");

            $("#result_faile_add").text($("#search_value").val())

            $(".result_faile").removeClass("hide");
        } else{
            //if result is not null, then it should be "return value" or "error message"
            try{
                result = JSON.parse(result)
            }catch (err){
                //result is the error message
            }

            if (!!result.key){      //"return value"
                $(".add_banner").addClass("hide");
                $(".result_faile").addClass("hide");

                $("#search_banner").text($("#search_value").val())
                $("#search_result").text(result.value)
                $("#search_result_author").text(result.author)

                $(".result_success").removeClass("hide");
            } else {        //"error message"
                $(".add_banner").addClass("hide");
                $(".result_faile").addClass("hide");

                $("#search_banner").text($("#search_value").val())
                $("#search_result").text(result)
                $("#search_result_author").text("")

                $(".result_success").removeClass("hide");
            }

        }

    }

    // 添加信息功能: 像super-dictionary 中添加词条
    $("#add").click(function() {
        $(".result_faile").addClass("hide");
        $(".add_banner").removeClass("hide");

        $("#add_value").val("")
    })

    var NebPay = require("nebpay");     //https://github.com/nebulasio/nebPay
    var nebPay = new NebPay();
    var serialNumber

    $("#push").click(function() {

        var to = dappAddress;
        var value = "0";
        var callFunction = "save"
        var callArgs = "[\"" + $("#search_value").val() + "\",\"" + $("#add_value").val() + "\"]"

        serialNumber = nebPay.call(to, value, callFunction, callArgs, {    //使用nebpay的call接口去调用合约,
            listener: cbPush        //设置listener, 处理交易返回信息
        });

        intervalQuery = setInterval(function () {
            funcIntervalQuery();
        }, 5000);
    });

    var intervalQuery

    function funcIntervalQuery() {
        nebPay.queryPayInfo(serialNumber)   //search transaction result from server (result upload to server by app)
            .then(function (resp) {
                console.log("tx result: " + resp)   //resp is a JSON string
                var respObject = JSON.parse(resp)
                if(respObject.code === 0){
                    alert(`set ${$("#search_value").val()} succeed!`)
                    clearInterval(intervalQuery)
                }
            })
            .catch(function (err) {
                console.log(err);
            });
    }

    function cbPush(resp) {
        console.log("response of push: " + JSON.stringify(resp))
    }

</script>

    <script src="js/index.js"></script>
           <canvas id="c" style="margin-top: -180px;z-index:90;"></canvas>
			<div class="footer">
			    <p style=" text-align:center;font-size:14px;color:#aaa">生活目标基于星云链主网运行，永久保存您的生活目标。</p>
			    <p><img style="height:1.5rem;" src="" alt=""></p>
			</div>
</body>

</html>
